/*
 * @Author: your name
 * @Date: 2021-04-29 18:34:57
 * @LastEditTime: 2021-04-29 19:25:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \offer20k\项目代码\management\src\pages\pageManagement\index.tsx
 */
// 页面管理
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { useDispatch, useSelector } from '@/.umi/plugin-dva/exports';
import IRootModel from '@/models/index';
import { pageModelState } from '@/models/pageModel';
import { Table, Tag, Space, Badge, Button } from 'antd';
import Forms from '@/components/Form';
const pageIndex: React.FC = () => {
  const dispatch = useDispatch();
  const { PagePagingList } = useSelector<IRootModel, pageModelState>(
    (state) => state.page,
  );

  useEffect(() => {
    dispatch({
      type: 'page/getPagePagingList',
    });
  }, []);
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      render: (name: string) => <a>{name}</a>,
    },
    {
      title: '路径',
      dataIndex: 'path  ',
    },
    {
      title: '顺序',
      dataIndex: 'order',
    },
    {
      title: '阅读量',
      dataIndex: 'views',
      render: (views: number) => {
        return (
          <Badge
            className="site-badge-count-109"
            count={views}
            style={{ backgroundColor: '#52c41a' }}
            overflowCount={Infinity}
          />
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (status: string) => {
        return status === 'publish' ? (
          <Badge status="success" text="已发布" />
        ) : (
          <Badge status="warning" text="草稿" />
        );
      },
    },
    {
      title: '发布时间',
      dataIndex: 'createAt',
      render: (createAt: string) => {
        return (
          <span>{`${new Date(createAt).getFullYear()}-${
            new Date(createAt).getMonth() + 1 < 10
              ? `0${new Date(createAt).getMonth() + 1}`
              : new Date(createAt).getMonth() + 1
          }-${new Date(createAt).getDate()}  ${new Date(
            createAt,
          ).getHours()}:${new Date(createAt).getMinutes()}:${new Date(
            createAt,
          ).getSeconds()}`}</span>
        );
      },
    },
    {
      title: '操作',
      render: () => (
        <Space size="middle">
          <span>
            <a>禁用</a>
          </span>{' '}
          <span>
            <a>编辑</a>
          </span>{' '}
          <span>
            <a>查看访问</a>
          </span>{' '}
          <span>
            <a>删除</a>
          </span>{' '}
        </Space>
      ),
    },
  ];

  return (
    <div className={styles.container}>
      <div className={styles.conTop}>
        <span>
          <a href="/">工作台</a>
          <span>/</span>
        </span>
        <span>
          <a href="/page">页面管理</a>
        </span>
      </div>
      <Forms />

      <div className={styles.table}>
        <div className={styles.tableTop}>
          <div>
            <Button type="primary">
              <i aria-label="图标: plus">
                <svg
                  viewBox="64 64 896 896"
                  focusable="false"
                  data-icon="plus"
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path>
                  <path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path>
                </svg>
              </i>
              <span>新建</span>
            </Button>
            <i aria-label="图标: reload" style={{ marginLeft: ' 12px' }}>
              <svg
                viewBox="64 64 896 896"
                focusable="false"
                data-icon="reload"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <path d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 0 0-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 0 1 655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 0 1 279 755.2a342.16 342.16 0 0 1-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 0 1 109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"></path>
              </svg>
            </i>
          </div>
        </div>
        <Table
          columns={columns}
          dataSource={PagePagingList}
          rowKey={(PagePagingList) => PagePagingList.id}
        />
      </div>
    </div>
  );
};
export default pageIndex;
